<template>
	<view :style="{'--color': color}">
		<status-bar title='店铺详情' :goHome='fromShare'></status-bar>
		<view class="topBg p-re">
			<view class="back bg00 p-ab"></view>
			<view class="card thmeBg p-re white">
				<image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="img wh p-ab"></image>
				<view class="item d-flex j-sb a-center">
					<view class="d-flex flex-1">
						<image :src="$imgUrls(pageData.logo)" mode="aspectFill" class="f-shrink-0"></image>
						<view class="p-left20">
							<view class="m-bot10">
								<text class="label m-right10 d-inline-block"
									v-if="pageData.bussName">{{ pageData.bussName }}</text>
								<text class="size28 bold">{{ pageData.name }}</text>
							</view>
							<view class="h6">{{ pageData.address }}</view>
							<!-- 众筹 -->
							<view class="d-flex a-end" v-if="getType == 2">
								<view class="size22 m-right10">保证金：<text
										class="size36 m-right6">{{ pageData.earnest_money }}</text> 元</view>
								<!-- <view class="btn flexac">缴纳</view> -->
							</view>
						</view>
					</view>
					<!-- <view class="text-center m-left20 zIndex"
						@click="toUrl('/joinPage/noticeList?store_id=' + store_id)">
						<text class="iconfont icon-qiyejianjie size40"></text>
						<view class="size22">运营公告</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="padding30">
			<view class="d-flex j-sb a-center m-bot30">
				<view class="size32 bold">订单/流水</view>
				<picker :value="date" mode="date" fields="month" :end="end" @change="dateChange">
					<view>
						<text class="size28 m-right10">{{ date }}</text>
						<text class="iconfont icon-xiangxia1 bold"></text>
					</view>
				</picker>
			</view>
			<view class="info bgf8 d-flex j-sa a-center">
				<view class="text-center">
					<view class="size40 color_FOD">{{ pageData.mOrderNum }}</view>
					<view class="size26 color_33">当月单量(单)</view>
				</view>
				<view class="text-center">
					<view class="size40 color_FOD">{{ pageData.mOrderMoney }}</view>
					<view class="size26 color_33">当月流水(元)</view>
				</view>
				<view class="text-center">
					<view class="size40 color_FOD">{{ pageData.mIncome }}</view>
					<view class="size26 color_33">当月收益(元)</view>
				</view>
			</view>
			<view class="list p-left20 p-right20">
				<view class="bot_bor_ee p-top30 p-bot30 line45" v-for="(item,index) in orderList" :key="index">
					<view class="size28">订单号：{{ item.order_code }}</view>
					<view class="size28">金额：￥{{ item.payMoney }}</view>
					<view class="size28">时间：{{ item.addDate }}</view>
				</view>
			</view>
		</view>

		<emptys v-if="noData" title="暂无数据"></emptys>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			// 格式化时间戳
			const currentDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm')
			return {
				fromShare: 0,
				imgUrl: this.imgUrl,
				store_id: '',
				agent_id: '',
				getType: '', // 加盟1、众筹2、代理3
				date: currentDate,
				end: currentDate,
				getYear: '',
				getMonth: '',
				pageData: '',
				orderList: [],
				noData: false,
				page: 1, // 第几页
				pageNum: 10, // 每页条数
				noMore: false // 没有更多
			}
		},
		computed: {
			...mapState(['color'])
		},
		onLoad(e) {
			console.log(e)
			if (e.fromShare) this.fromShare = e.fromShare
			if (e.store_id) this.store_id = e.store_id
			if (e.agent_id) this.agent_id = e.agent_id
			if (e.getType) this.getType = e.getType

			this.getYear = this.date.split('-')[0]
			this.getMonth = this.date.split('-')[1]
			this.getDetail()
		},
		methods: {
			dateChange(e) {
				this.date = e.detail.value
				this.getYear = this.date.split('-')[0]
				this.getMonth = this.date.split('-')[1]
				this.noMore = false
				this.page = 1
				this.getDetail()
			},
			getDetail() {
				this.$http.post({
					url: '/osmxcxApi/getStoreOrderList',
					data: {
						store_id: this.store_id,
						agent_id: this.agent_id, // 代理需传
						getYear: this.getYear, // 空为当前年
						getMonth: this.getMonth, // 空为当前月
						getType: this.getType,
						page: this.page,
						pageNum: this.pageNum
					}
				}).then(res => {
					this.pageData = res.data.storeFind
					let result = res.data.orderList || []
					this.orderList = this.page == 1 ? result : this.orderList.concat(result)
					if (result.length < this.pageNum) this.noMore = true

					console.log('订单列表', this.orderList)

					if (this.orderList.length) {
						this.noData = false
					} else {
						this.noData = true
					}
				})
			}
		},
		onReachBottom() {
			if (this.noMore) return
			this.page++
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.topBg {
		padding: 30rpx 30rpx 0 30rpx;

		.back {
			width: 100%;
			height: calc(100% - 30rpx);
			left: 0;
			top: 0;
		}

		.card {
			padding: 30rpx 20rpx 30rpx 30rpx;
			z-index: 1;

			.img {
				top: 0;
				left: 0;
			}

			.item {
				image {
					width: 120rpx;
					height: 120rpx;
				}

				.label {
					padding: 4rpx 10rpx;
					background: #990000;
					border-radius: 10rpx;
					font-size: 22rpx;
					color: #fff;
				}

				.btn {
					width: 64rpx;
					height: 36rpx;
					background: #FF9900;
					font-size: 22rpx;
				}
			}
		}
	}

	.info {
		height: 120rpx;
	}

	.list {
		color: #515151;
	}
</style>